<template>
	<view>
		<view class="topDetail">
			<view class="l">
				<image src="../static/warn-AI.png" mode=""></image>
				<view class="text">
				</view>
				<view class="button" style="border: none;">
				</view>
			</view>

		</view>

		<view class="content">
			<view class="boxList">
				<view class="item_box">
					<view class="l1">
						类别:
					</view>
					<view class="r1 g">
						X86
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						状态:
					</view>
					<view class="r1">
						<text>{{onlineCode==0?'在线':'离线'}}</text>
						<view class="status" :style="{background:onlineCode==1?'#A0A0A0':'#00FF00'}">

						</view>
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						SN:
					</view>
					<view class="r1" @click="copy(details.sn)">
						<text>默认隐藏</text>
						<image src="/static/copy.png" mode=""></image>
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						备注:
					</view>
					<view class="r1" @click="editDesc(details.sn)">
						<text>默认隐藏</text>
						<image src="/static/edit.png" mode=""></image>
					</view>
				</view>
			</view>
			<view style="height: 100rpx;">

			</view>
			<view class="equipment_top">
				<view :class="day==0?'equipment_b active':'equipment_b'" @click="clickTab(0)">
					今天
				</view>
				<view :class="day==1?'equipment_b active':'equipment_b'" @click="clickTab(1)">
					昨天
				</view>
			</view>
			<!-- 			<view class="line1_text">
				<view class="l">
					上行 <text>{{details.up_flow}}</text>Mbps
				</view>
				<view class="r">
					下行 <text>{{details.down_flow}}</text> Mbpsd
				</view>
			</view> -->
			<view style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:80rpx;border-radius: 20rpx;">

				<view class="charts-box1">
					<view class="bottom_box" style="flex-direction: column;padding-left: 20rpx;">
						<view style="color: #D50C0C;">
							累计收益{{details.money}}
						</view>
						<view style="color: #D9D9D9;margin: 0;">
							在线天数{{details.day}}
						</view>

					</view>
					<l-f2 ref="chart"></l-f2>
					<view class="noneLine" v-if="chartsDataLine1.date.length==0">
						<image src="/static/noneLine.png" mode=""></image>
					</view>
					<view class="t" v-if="chartsDataLine1.date.length>0" @click="showDetails">
						网络详情
					</view>
					<view class="wlBox" v-if="showD">
						<view class="text">
							NAT类型:{{network.nat}}
						</view>
						<view class="text">
							剩余磁盘空间:{{(network.free_disk_size/1024).toFixed(2)}}G
						</view>
						<view class="text">
							磁盘总空间:{{(network.total_disk_size/1024).toFixed(2)}}G
						</view>
						<view class="text">
							剩余内存:{{(network.free_memory/1024).toFixed(2)}}G
						</view>
						<view class="text">
							总内存:{{(network.total_memory/1024).toFixed(2)}}G
						</view>
						<view class="text">
							测速宽带:{{(network.test_bandwidth/1024).toFixed(2)}}Mbps
						</view>
						<view class="text">
							服务宽带:{{(network.upload_bandwidth/1024).toFixed(2)}}Mbps
						</view>
						<view class="text">
							CPU评级:{{network.level=='high'?'高':network.level=='middle'?'中':network.level=='low'?'低':network.level=='bad'?'差':'禁用'}}
						</view>
						<view class="text">
							出口IP:{{network.remote_ip}}
						</view>
						<view class="text">
							运营商:{{network.isp}}
						</view>
					</view>
				</view>

				<!-- 		<view class="bo">
				
				</view> -->
			</view>
			<view
				style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;">
				<view class="line2_text" style="margin-bottom: 10px;">
					<view class="l" style="color:#000000">
						内存
					</view>
					<view class="r" style="color:#000000">
						<view class="t">
							内存总量:{{(network.total_memory/1024).toFixed(2)}}G/{{((network.total_memory - network.free_memory)/1024).toFixed(2)}}G
						</view>
					</view>
				</view>
				<view style="position: relative;">
					<view style="width: 100%;height: 600rpx;position: relative;">
						<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
						<cover-view
							style="position: absolute;top: 50%; left: 50%; transform: translate3d(-50%, -80%, 0);text-align:center; z-index: 10">
							<cover-view style="font-size: 18px;color: #333333;margin: 0;font-weight: bold;">内存总量
							</cover-view>
							<cover-view style="font-size: 18px;color: #333333;margin: 0;font-weight: bold;">
								{{(network.total_memory/1024).toFixed(2)}}G</cover-view>
						</cover-view>
					</view>
				</view>
			</view>
			<view
				style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;">
				<view class="line2_text" style="margin-bottom: 10px;">
					<view class="l" style="color:#000000">
						系统盘
					</view>
					<view class="r" style="color:#000000">
						<view class="t">
							硬盘总量:{{(network.total_disk_size/1024).toFixed(2)}}G/{{((network.total_disk_size-network.free_disk_size)/1024).toFixed(2)}}G
						</view>
					</view>
				</view>
				<view style="position: relative;">
					<view style="width: 100%;height: 600rpx;position: relative;">
						<echarts ref="echarts1" :option="option" canvasId="echarts1"></echarts>
						<cover-view
							style="position: absolute;top: 50%; left: 50%; transform: translate3d(-50%, -80%, 0);text-align:center; z-index: 10">
							<cover-view style="font-size: 18px;color: #333333;margin: 0;font-weight: bold;">内存总量
							</cover-view>
							<cover-view style="font-size: 18px;color: #333333;margin: 0;font-weight: bold;">
								{{(network.total_disk_size/1024).toFixed(2)}}G</cover-view>
						</cover-view>
					</view>
				</view>
			</view>
			<view class="equipment_top">

				<view :class="'equipment_b'" style="background: #DBDBDB;color: #666666;width: 222rpx;"
					@click="removeEquuipment()">
					移除设备
				</view>
			</view>
		</view>
		<z-modal ref="zModel" :show="modalControl" :btnGroup="btnGroup" :contentType="2" :titleText="'修改备注'"
			@cancle="cancle" @sure="sure"></z-modal>
	</view>
</template>

<script>
	// import F2 from '@antv/f2/dist/f2';
	// import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import zModal from '@/components/z-modal/z-modal.vue'
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	import aiProgress from '@/components/ai-progress/ai-progress'

	export default {
		components: {
			aiProgress,
			echarts
		},
		data() {
			return {
				day: 0,
				chartsDataLine1: {
					date: []
				},
				chartsDataLine2: {
					date: []
				},
				chartsDataLine3: {
					date: []
				},
				chartsDataLine4: {
					date: []
				},
				btnGroup: [{
						text: '取消',
						color: '#FFFFFF',
						bgColor: '#999999',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'cancle'
					},
					{
						text: '确定',
						color: '#FFFFFF',
						bgColor: '#007AFF',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'sure'
					}
				],
				modalControl: false,
				details: {},
				sn: null,
				onlineCode: 1,
				network: {},
				diskInfo: {},
				showD: false,
				showD1: false,
				option: {},
				option1: {}
			};
		},
		watch: {
			chartsDataLine1() {
				let arr1 = this.$fun.setArr1(this.chartsDataLine1.date, this.chartsDataLine1.down, '下行', '#5ccaa5')
				let arr2 = this.$fun.setArr1(this.chartsDataLine1.date, this.chartsDataLine1.up || this.chartsDataLine1
					.flow, '上行', '#b1544d')
				let arrObj1 = [...arr1, ...arr2]
				this.xrDom1('chart', arrObj1, 'color')
				this.xrDom1('chart10')
				this.xrDom1('chart11')
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.sn = option.name
			this.onlineCode = option.onlineCode
			this.getListLine()
		},
		mounted() {
			let arr1 = this.$fun.setArr1(this.chartsDataLine1.date, this.chartsDataLine1.down, '下行', '#5ccaa5')
			let arr2 = this.$fun.setArr1(this.chartsDataLine1.date, this.chartsDataLine1.up || this.chartsDataLine1.flow,
				'上行', '#b1544d')
			let arrObj1 = [...arr1, ...arr2]
			this.xrDom1('chart', arrObj1, 'color')
			this.xrDom1('chart10')
			this.xrDom1('chart11')
		},
		methods: {
			deviceOperate(operateType) {
				this.$fun.ajax.post('/butt/deviceOperate', {
					sn: this.sn,
					operateType
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
					}
				})
			},
			xrDom1(refDom, arrObj, color) {
				if (refDom == 'chart10') {
					this.option = {
						backgroundColor: "transparent",
						tooltip: {
							trigger: "item",
							formatter: function(params) {
								return `${params.name}:${params.value} `
							}
						},
						legend: {
							orient: "horizontal",
							icon: "circle",
							bottom: 0,
							x: "center",
							textStyle: {
								color: "#000000"
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						series: [{
							label: {
								normal: {
									fontSize: 14,
								},
								textStyle: {
									color: "#000000"
								}
							},
							type: 'pie',
							center: ['50%', '45%'],
							radius: ['40%', '60%'],
							data: [{
								const: 'const',
								name: '使用',
								value: ((this.network.total_memory - this.network.free_memory) / 1024)
									.toFixed(2),

							}, {
								const: 'const',
								name: '剩余',
								value: (this.network.free_memory / 1024).toFixed(2)
							}],

						}]
					};
					return
				}
				if (refDom == 'chart11') {
					this.option1 = {
						backgroundColor: "transparent",
						tooltip: {
							trigger: "item",
							formatter: function(params) {
								return `${params.name}:${params.value} `
							}
						},
						legend: {
							orient: "horizontal",
							icon: "circle",
							bottom: 0,
							x: "center",
							textStyle: {
								color: "#000000"
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						series: [{
							label: {
								normal: {
									fontSize: 14,
								},
								textStyle: {
									color: "#000000"
								}
							},
							type: 'pie',
							center: ['50%', '45%'],
							radius: ['40%', '60%'],
							data: [{
								const: 'const',
								name: '使用',
								value: ((this.network.total_disk_size - this.network.free_disk_size) /
										1024)
									.toFixed(2),

							}, {
								const: 'const',
								name: '剩余',
								value: (this.network.free_disk_size / 1024).toFixed(2)
							}],

						}]
					};
					console.log(this.option1)
					return
				}
				this.$refs[refDom].init(config => {

					const chart = new F2.Chart(config);
					chart.source(arrObj);
					chart.scale('date', {
						type: 'timeCat',
						tickCount: 5,
						mask: 'hh:mm',
						// mask: 'YY-mm-dd hh:II:ss'
					});
					chart.scale('value', {
						tickCount: 1
					});
					chart.axis('date', {
						label: function label(text, index, total) {
							// 只显示每一年的第一天
							const textCfg = {};
							if (index === 0) {
								textCfg.textAlign = 'left';
							} else if (index === total - 1) {
								textCfg.textAlign = 'right';
							}
							return textCfg;
						}
					});
					// chart.tooltip({
					// 				custom: true,
					// 				showXTip: true,
					// 				showYTip: true,
					// 				snap: true,
					// 				crosshairsType: 'xy',
					// 				crosshairsStyle: {
					// 					lineDash: [ 2 ]
					// 				}
					// 				});
					// console.log(					chart.get('legendController').legends.top[0])
					// chart.legend({
					// 	position: 'bottom',
					// 	custom: true,
					// });
					chart.get('legendController').position = "bottom"
					chart.tooltip({
						custom: true,
						showXTip: true,
						showYTip: true,
						snap: true,
						crosshairsType: 'xy',
						crosshairsStyle: {
							lineDash: [2]
						},
						onChange: function onChange(obj) {
							if (refDom == 'chart' || refDom == 'chart3') {
								console.log(chart.get('legendController'))
								const legend = chart.get('legendController').legends.bottom[0];
								const tooltipItems = obj.items;
								const legendItems = legend.items;
								const map = {};
								legendItems.forEach(function(item) {
									map[item.name] = item
								});
								tooltipItems.forEach(function(item) {
									const name = item.name;
									const value = item.value;
									if (map[name] && refDom == 'chart') {
										map[name].value = value + 'mbps';
									} else {
										map[name].value = value + '%';
									}
								});
								legend.setItems(Object.values(map));
							}
						},
						onHide: function onHide() {
							if (refDom == 'chart' || refDom == 'chart3') {
								const legend = chart.get('legendController').legends.top[0];
								legend.setItems(chart.getLegendItems().country);
							}
						}
					});
					// chart
					// 	.line()
					// 	.position('date*value')
					// 	.color('type', ['#1677FF', '#00B7F4', '#FF9F18'])
					// 	.size('type', [3, 1, 1]);

					if (refDom == 'chart' || refDom == 'chart3') {
						chart
							.area()
							.position('date*value')
							.color('type', ['#c24e4c', '#5ccaa5'])
						chart.line().position('date*value').color('type', ['#c24e4c', '#5ccaa5']).size('type', [
							1.2, 1.2
						]);
					} else {
						chart
							.area()
							.position('date*value')
							.color(color)
						chart.line().position('date*value').color(color).size(1.2);
					}
					chart.render();
					return chart;
				});

			},
			editDesc() {
				this.modalControl = true
				this.$refs.zModel.inputText = this.details.desc
			},
			sure(e) {
				if (e.inputText == '') {
					this.$fun.msg('请输入备注')
					return;
				}
				this.$fun.ajax.post('butt/updateBind', {
					desc: e.inputText,
					sn: this.sn
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg);
						this.modalControl = false
						setTimeout(() => {
							this.getListLine()
						}, 500)
					}
				})
			},
			cancle() {
				this.modalControl = false
			},
			getListLine() {
				this.$fun.ajax.post('/butt/info', {
					sn: this.sn,
					day: this.day
				}).then(res => {
					if (res.code == 1) {
						this.chartsDataLine1 = res.data.kline
						this.details = res.data.info
						this.diskInfo = res.data.diskInfo
						this.network = res.data.network
						return res.data.kline
					}
				})
			},
			clickTab(day) {
				if (day == this.day) {
					return
				}
				this.day = day
				this.getListLine()
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			removeEquuipment() {
				uni.showModal({
					content: '确定要移除设备吗?',
					success: (e) => {
						if (e.confirm) {
							this.$fun.ajax.post('/butt/removeBind', {
								sn: this.sn
							}).then(res => {
								if (res.code == 1) {
									this.$fun.msg(res.msg)
									this.$fun.jump('', 4, 1200)
								}
							})
						}
					}
				});
			},
			showDetails() {
				this.showD = !this.showD
			}
		},

	}
</script>

<style lang="scss">
	.topDetail {
		width: 100%;
		background: #2a80f7;
		display: flex;
		padding: 30rpx;
		padding-bottom: 60rpx;

		.l {
			width: 100%;
			text-align: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.text {
				color: rgb(81, 214, 206);
				font-size: 26rpx;
			}

			.button {
				margin-top: 20rpx;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				color: rgb(81, 214, 206);
				border: 2rpx solid rgb(81, 214, 206);
			}
		}

		.r {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;


		}
	}


	.content {
		padding: 30rpx;
		background: #EEEEEE;
		position: relative;

		.boxList {
			width: calc(100% - 60rpx);
			box-sizing: border-box;
			position: absolute;
			top: -50rpx;
			// top: -;
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 6rpx;
			padding: 42rpx;

			.item_box {
				display: flex;
				align-items: center;
				flex-direction: column;

				.l1 {
					width: 80rpx;
					font-size: 26rpx;
					text-align: center;
					color: #BABABA;
				}

				.r1 {
					margin-top: 27rpx;
					color: #333333;
					display: flex;
					font-size: 26rpx;
					align-items: center;

					image {
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}

					.status {
						margin-left: 10rpx;
						width: 16rpx;
						height: 16rpx;
						font-size: 26rpx;
						border-radius: 50%;
						background: rgb(0, 255, 0);
					}

					.copy {
						font-size: 26rpx;
						color: #333333;
						border: 2rpx solid #fff;
						border-radius: 20rpx;
					}
				}

				.g {
					color: #333333;
				}
			}
		}

		.equipment_top {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			margin-bottom: 30rpx;

			.equipment_b {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 45%;
				height: 88rpx;
				border-radius: 6rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #222222;
				background: rgb(219, 219, 219);
			}

			.active {
				background: #2a80f7;
				color: #FFFFFF;
			}
		}

		.line1_text {
			display: flex;

			.l {
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #48c52d;
				}
			}

			.r {
				margin-left: 20rpx;
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #ff6259;
				}
			}
		}

		.charts-box1 {
			background: #FFFFFF;
			margin-top: 30rpx;
			width: 100%;
			height: 600rpx;
			padding-right: 0;
			position: relative;

			.noneLine {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 600rpx;

				background: #FFFFFF;

				image {
					width: 278upx;
					height: 270upx;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					margin: auto;
				}
			}

			.t {
				position: absolute;
				top: 0;
				right: 30rpx;
				color: #869fc7;
				font-size: 24upx;
			}

			.wlBox {
				width: 450upx;
				height: 520upx;
				background: #FFFFFF;
				position: absolute;
				top: 90upx;
				z-index: 100;
				right: 0;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
				padding: 30upx;
				font-size: 24upx;

				.text {
					margin-bottom: 15upx;
					white-space: nowrap;
				}
			}
		}

		.bottom_box {
			margin-top: 0;
			// border-top: 1px solid #e5e5e5;
			padding-top: 0;
			display: flex;
			justify-content: center;

			view:nth-child(1) {
				color: #e5e5e5;
				font-size: 28rpx;
			}

			view:nth-child(2) {
				margin-left: 60rpx;
				color: #ff6259;
				font-size: 28rpx;
			}
		}

		.bo {
			margin-top: 30rpx;
			width: 100%;
			height: 20rpx;
			background: #f2f2f2;
		}

		.line_title {
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 20rpx;
		}

		.line2_text {
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;

			.l {
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #48c52d;
				}
			}

			.r {
				margin-left: 20rpx;
				color: #8d8d8d;
				font-size: 24rpx;

				text {
					color: #ff6259;
				}
			}
		}
	}
</style>